import React, { Component } from 'react';
import TheTable from "@/components/TheTable";
import ThePagination from "../../../components/ThePagination";
import TheButton from "@/components/TheButton";
import TheQueryForm from '@/components/TheQueryForm';
import TheDialog from '@/components/TheDialog';
import moment from 'moment';
import { apiAppCouponInfoPage, apiGetStoreId } from '@/request/couponManagement'
import { Space, Tabs, message } from "antd";
import store from "@/store/store"
// import './style.scss'
const { TabPane } = Tabs;

class Coupons extends Component {
  constructor(props) {
    super(props);
    this.queryFormRef_1 = React.createRef()
    this.state = {
      sendDialog: false,
      indcutsValue: {},
      sendCouponId: '',
      defaultActiveKey: '1',
      form_show_1: true,
      searchOption_1: [
        {
          field: 'couponTitle',
          label: '优惠券名称',
          placeholder: '请输入',
          required: false,
          rules: [],
          type: 'Input',
        },
      ],
      columns_1: [
        {
          title: "优惠券ID",
          dataIndex: "couponId",
          key: "couponId",
        },
        {
          title: "优惠券名称",
          dataIndex: "couponTitle",
          key: "couponTitle",
          ellipsis: {
            showTitle: false,
          },
          onCell: () => {
            return {
              style: {
                maxWidth: 200,
                overflow: 'hidden',
                whiteSpace: 'nowrap',
                textOverflow: 'ellipsis',
              }
            }
          },
        },
        {
          title: "优惠券类型",
          dataIndex: "couponType",
          key: "couponType",
          render: (text, render) => {
            let label = ''
            switch (text) {
              case "J":
                label = "代金券"
                break;
              case "Z":
                label = "折扣券"
                break;
              default:
                label = "字段值错误"
            }
            return label
          }
        },
        {
          title: "范围",
          dataIndex: "commodityScope",
          key: "commodityScope",
          render: (text, render) => {
            let label = ''
            switch (text) {
              case 0:
                label = "全部商品可用"
                break;
              case 1:
                label = "限制品类可用"
                break;
              case 2:
                label = "商品券"
                break;
              default:
                label = "字段值错误"
            }
            return label
          }
        },
        {
          title: "优惠",
          dataIndex: "couponPrice",
          key: "couponPrice",
          render: (text, render) => {
            let label = ''
            switch (render.usePrice) {
              case -1:
                label = '无门槛，'
                break;
              default:
                label = "满" + (render.usePrice) / 100 + "可用，"
            }
            switch (render.couponType) {
              case 'J':
                label += "减免" + text / 100 + "元"
                break;
              case 'Z':
                label += "打" + text / 10 + "折"
                if (render.couponMaxPrice !== -1) {
                  label += '，最大折扣金额' + (render.couponMaxPrice) / 100 + '元'
                }
                break;
              default:
                label = "字段值错误"
            }
            return label
          }
        },
        {
          title: "状态",
          dataIndex: "activeStatus",
          key: "activeStatus",
          render: (text, render) => {
            let label = ''
            switch (text) {
              case 0:
                label = "未开始"
                break;
              case 1:
                label = "进行中"
                break;
              case 2:
                label = "已结束"
                break;
              default:
                label = "字段值错误"
            }
            return label
          }
        },
        {
          title: "最近修改时间",
          dataIndex: "updateTime",
          key: "updateTime",
          render: (text, render) => {
            return text ?? '/'
          }
        },
      ],
      dataSource_1: [],
      pageData_1: {
        pageNo: 1,
        pageSize: 10
      },
      total_1: 0,
      queryForm_1: {},
      selectedRowKeys: [],
      storeId: ""
    }
  }
  componentDidMount() {
    this.getStoreId()
  }
  getStoreId = async () => {
    await apiGetStoreId().then(res => {
      if (res.code === 0) {
        this.setState({
          storeId: res.data
        }, () => {
          this.getData()
        })
      }
    })
  }
  getData = async (values) => {
    let { activityEndTime } = this.props
    let { defaultActiveKey, storeId } = this.state;
    let { pageNo, pageSize } = this.state["pageData_" + defaultActiveKey]
    let couponSpecies = ""
    if (values && 'time' in values && values.time) {
      values.startTime = moment(values.time[0]).format('YYYY-MM-DD') + " 00:00:00"
      values.stopTime = moment(values.time[1]).format('YYYY-MM-DD') + " 23:59:59"
      delete values.time
    }
    if (defaultActiveKey === "1") {
      couponSpecies = "P"
    } else {
      couponSpecies = "M"
    }
    if (values && 'type' in values) {
      if (values.type === 'Q') {
        delete values.type
      }
    }
    this.setState({
      ["queryForm_" + defaultActiveKey]: values === undefined ? this.state["queryForm_" + defaultActiveKey] : { ...values }
    }, async () => {
      let params = {
        pageNo,
        pageSize,
        couponSpecies,
        queryForm: {
          ...values
        }
      }
      store.dispatch({
        type: 'SaveSearchValues',
        data: {
          pathName: 'couponsListSearch',
          ...params
        }
      })
      let res = await apiAppCouponInfoPage({
        ...this.state["queryForm_" + defaultActiveKey],
        couponSpecies,
        pageNo,
        pageSize,
        storeId,
        lotteryDrawEndTime: activityEndTime,
        activeStatus: 1
      })
      if (res.rows) {
        this.setState({
          ["dataSource_" + defaultActiveKey]: res.rows,
          ["total_" + defaultActiveKey]: res.totalCount,
          ["pageData_" + defaultActiveKey]: {
            pageNo: res.pageNo,
            pageSize: res.pageSize
          }
        })
      }
    })
  }

  // 切换tab
  onTabChange = (e) => {
    this.setState({
      defaultActiveKey: e
    }, () => {
      this.getData()
    })
  }
  pageChange = (pageNo, pageSize) => {
    let { defaultActiveKey } = this.state
    this.setState({
      ["pageData_" + defaultActiveKey]: {
        pageNo,
        pageSize
      }
    }, () => {
      this.getData()
    })
  };

  onReset() {
    let { defaultActiveKey } = this.state
    this.setState({
      ["queryForm_" + defaultActiveKey]: {}
    }, () => {
      this.pageChange(1, 10)
    })
  }

  onFormSearch(values) {
    let { defaultActiveKey } = this.state
    this.setState({
      ["pageData_" + defaultActiveKey]: { pageNo: 1, pageSize: 10 }
    }, () => {
      this.getData(values)
    })
  }
  onSelectChange = (selectedRowKeys, selectedRows) => {
    // console.log(selectedRowKeys);
    this.setState({ selectedRowKeys, selectedRows })
  };
  handleOk = () => {
    const { selectedRows } = this.state
    this.props.handleOk({ coupons: selectedRows })
  }
  handleCancel = () => {
    this.setState({ selectedRowKeys: [] }, () => {
      this.props.handleCancel()
    })
  }
  render() {
    let {
      defaultActiveKey,
      form_show_1,
      searchOption_1,
      columns_1,
      dataSource_1,
      pageData_1,
      total_1,
      selectedRowKeys,
    } = this.state
    const { visible } = this.props
    const rowSelection = {
      type: 'radio',
      selectedRowKeys,
      onChange: this.onSelectChange
    };
    return (
      <TheDialog
        width={1200}
        height={800}
        title={'添加优惠券'}
        visible={visible}
        handleCancel={() => this.handleCancel()}
        handleOk={() => this.handleOk()}
      >
        <div className="p-layout-box">
          <Tabs
            activeKey={defaultActiveKey}
            type="card"
            onChange={(e) => this.onTabChange(e)}
            tabBarExtraContent={<></>}
          >
            <TabPane tab="线上商城" key="1" forceRender>
              <TheQueryForm ref={(ref) => this.queryFormRef_1 = ref} show={form_show_1}
                option={searchOption_1}
                onGetValues={(values) => this.onFormSearch(values)}
                onReset={(values) => this.onReset(values)}
              >
              </TheQueryForm>
              <TheTable
                scroll={{ x: "max-content", y: '63vh' }}
                columns={columns_1}
                dataSource={dataSource_1}
                // loading={true}
                rowSelection={rowSelection}
                rowKey={'couponId'}
              />
              <ThePagination
                pageNo={pageData_1.pageNo}
                pageSize={pageData_1.pageSize}
                total={total_1}
                pageChange={this.pageChange}
              />
            </TabPane>
          </Tabs>
        </div>
      </TheDialog>
    );
  }
}
export default Coupons; 
